<template>
    <div>
        <div data-v-295bc851="" class="person_content">
            <ul data-v-295bc851="" class="person_title clearfix">
                <li data-v-295bc851="" class="now">我的关注</li>
            </ul> <!---->
            <div data-v-295bc851="" class="person_info">
            <div data-v-295bc851="" class="course_content" v-for="item in GuanZhuXinxi">
                <div data-v-295bc851="" class="img_box">
                    <img data-v-295bc851="" :src="item.avatar" alt="">
                </div>
                <p data-v-295bc851="" class="course_name">{{item.name}}</p>
                <router-link :to="{path: '/teacherXinX',query:{teacherId:item.id}}"><a data-v-295bc851="">进入主页</a></router-link>
                <a data-v-295bc851="" class="close_collect" @click="cancel(item.id)">取消关注</a>
            </div>
        </div>
    </div>

    </div>
</template>

<script>

    export default {
        name: "MyGuanZhu.vue",
        data(){
            return{
                HuiYuanId: window.sessionStorage.getItem("memberId"),
                GuanZhuXinxi:[],
                guanZhuData:{
                  teacherId:'',
                  memberId:window.sessionStorage.getItem("memberId"),
                },
            }
        },
        created() {
        this.queryAllGuanZhuTeacher();
            },
        methods:{
            //查询所有关注的讲师信息
            queryAllGuanZhuTeacher(){
                var that=this;
                this.$http.post("/core/shoucangTeacher/findAttentionTeacherById/"+this.HuiYuanId).then(function (resp) {
                    that.GuanZhuXinxi=resp.data.data;
                    console.log(that.GuanZhuXinxi)
                })
            },
            // //取消关注讲师
            cancel(id){
                this.guanZhuData.teacherId=id;
                console.log(this.guanZhuData)
                var that=this;
                this.$http.post("/core/shoucangTeacher/deleteAttentionTeacher",this.guanZhuData).then(function (resp) {
                    if (resp.data.code===200){
                        that.$message.success(resp.data.msg)
                    }else {
                        that.$message.error(resp.data.msg)
                    }
                    that.queryAllGuanZhuTeacher();
                })
            }
        }
    }

</script>

<style scoped>
    .person_content[data-v-295bc851] {
        width: 1012px;
        float: right;
        background: #fff;
        border-radius: 6px;
    }
    .person_info[data-v-295bc851] {
        min-height: 400px;
        padding-bottom: 30px;
    }

    .person_content {
        width: 1012px;
        float: right;
        background: #fff;
        border-radius: 6px;
    }
    .person_title li[data-v-295bc851] {
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }
    .person_title li.now {
        border-bottom: 2px solid #d51423;
    }
    .person_title li {
        color: #d51423;
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }
    .course_content[data-v-295bc851] {
        padding: 25px 0;
        margin: 0 25px;
        border-bottom: 2px solid #f2f2f2;
        position: relative;
    }
    .course_content img[data-v-295bc851] {
        width: 86px;
        height: 86px;
        border-radius: 50%;
    }
    .course_content p.course_name[data-v-295bc851] {
        top: 25px;
        color: #333;
    }
    .course_content a[data-v-295bc851] {
        display: block;
        width: 106px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 6px;
        font-size: 14px;
        border: 1px solid #999;
        color: #999;
        background: #fff;
        position: absolute;
        top: 25px;
        right: 0;
        cursor: pointer;
    }
    .course_content a.close_collect[data-v-295bc851] {
        top: 80px;
        border: none;
    }
    .course_content p.course_name[data-v-295bc851] {
        top: 25px;
        color: #333;
    }
    .course_content .img_box[data-v-295bc851] {
        display: inline-block;
        width: 86px;
        height: 86px;
        border-radius: 50%;
    }
    .course_content p.course_name[data-v-295bc851] {
        top: 25px;
        color: #333;
    }
    .course_content p[data-v-295bc851] {
        position: absolute;
        font-size: 14px;
        left: 115px;
        color: #999;
    }
</style>